<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>
<template>
  <div class="entryIndex">
    <div class="sta_title">
      <div class="goBack" @click="saveEntry"><Icon type="ios-arrow-back" /><span class="gb_font">返回</span></div>
      <div class="st_font">
        <span :class="entryData.chooseIndex != 0?'stf_up':'stf_up cantClick'" @click="lastItem">上一项</span>
        <span class="stf_title">7月16日 {{entryData.dataList[entryData.chooseIndex].title}}</span>
        <span :class="entryData.chooseIndex != entryData.dataList.length - 1?'stf_down':'stf_down cantClick'" @click="nextItem">下一项</span>
      </div>
      <div class="st_button"><Icon type="md-menu" /></div>
    </div>
    <div class="content">
      <div class="place">
        <div class="place_title">{{entryData.dataList[entryData.chooseIndex].title}}</div>
        <div class="place_input" v-if="entryData.dataList[entryData.chooseIndex].dataStatus == 1">
          <Select v-model="selectValue">
            <Option v-for="item in selectList" :value="item.value" :key="item.value" disabled>{{ item.label }}</Option>
          </Select>
        </div>
        <div class="place_input" v-if="entryData.dataList[entryData.chooseIndex].dataStatus == 2">
          <InputNumber :max="10000" :min="0" v-model="entryData.dataList[entryData.chooseIndex].nowValue" disabled></InputNumber>
        </div>
        <div class="place_input" v-if="entryData.dataList[entryData.chooseIndex].dataStatus == 3">
          <TimePicker format="HH:mm" confirm placeholder="选择时间" @on-change="changeTime" disabled></TimePicker>
        </div>
      </div>
      <!-- 富文本框 -->
      <div class="richText">
        <wangeditor :catchData="catchData"></wangeditor>
      </div>
      <!-- 说明 -->
      <div class="explain">
        <div class="explain_title">填写说明</div>
        <div class="explain_content">
          {{entryData.dataList[entryData.chooseIndex].explain}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import cookie from 'js-cookie';
  import wangeditor from '../assembly/editor'
  export default {
    props: ['entryData'],
    data() {
      return {
        isCollapsed: false,
        itemList: [],
        selectList: [
          {
            value: 'New York',
            label: 'New York'
          },
          {
            value: 'London',
            label: 'London'
          },
        ],
        selectValue: '',
        time: '',
        editorContent: '',
      };
    },
    components: {
      wangeditor
    },
    created() {
      window.document.title = 'SCS';
    },
    methods: {
      saveEntry(){
        this.$emit('saveEntry')
      },
      lastItem(){
        let self = this
        if (self.entryData.chooseIndex != 0){
          self.entryData.chooseIndex = self.entryData.chooseIndex - 1
        }
      },
      nextItem(){
        let self = this
        console.log(11)
        if (self.entryData.chooseIndex != self.entryData.dataList.length - 1){
          self.entryData.chooseIndex = self.entryData.chooseIndex + 1
        }
      },
      changeTime(time){
        let self = this
        self.time = time
      },
      catchData(value){
        this.editorContent = value      //在这里接受子组件传过来的参数，赋值给data里的参数
        console.log(this.editorContent)
      }
    },
  }
</script>
<style lang="less">
  .entryIndex{
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    opacity: 10;
    background: #f4f4f4;
    padding: 0 16px;
    box-sizing: border-box;
    .sta_title{
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin: 16px 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      .goBack{
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        .ivu-icon{
          font-size: 20px;
          line-height: 36px;
        }
        .gb_font{
          font-size: 17px;
          color: #666666;
          line-height: 37px;
        }
      }
      .st_font{
        display: flex;
        flex-direction: row;
        .stf_title{
          font-size: 17px;
          color: #222222;
          margin-left: 50px;
          margin-right: 50px;
        }
        .stf_up,.stf_down{
          font-size: 17px;
          color: #3f8fe0;
          cursor: pointer;
        }
        .cantClick{
          color: #878b91;
          cursor: not-allowed;
        }
      }
      .st_button{
        position: absolute;
        right: 0;
        top: 4px;
        width: 38px;
        height: 28px;
        line-height: 27px;
        text-align: center;
        background: #e8e8e8;
        border-radius: 20px;
        cursor: pointer;
        .ivu-icon{
          color: #666666;
          font-size: 20px;
        }
      }
      .st_button:hover{
        .ivu-icon{
          color: #57a3f3;
          transition: color .2s ease;
        }
      }
    }
    .content{
      display: flex;
      flex-direction: column;
      width: 100%;
      background: #f4f4f4;
      .place{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        .place_title{
          font-size: 15px;
          color: #222222;
          margin-bottom: 16px;
        }
        .place_input{
          width: 330px;
          height: 36px;
          .ivu-select{
            width: 100%;
            height: 100%;
            line-height: 36px;
            font-size: 16px;
          }
          .ivu-input-number{
            width: 100%;
            height: 100%;
            line-height: 36px;
            font-size: 16px;
            .ivu-input-number-handler{
              height: 18px;
              .ivu-input-number-handler-down-inner, .ivu-input-number-handler-up-inner{
                line-height: 18px;
              }
            }
          }
          .ivu-date-picker{
            width: 100%;
            height: 100%;
            .ivu-date-picker-rel{
              width: 100%;
              height: 100%;
              .ivu-input-wrapper{
                width: 100%;
                height: 100%;
                .ivu-input-icon{
                  width: 36px;
                  height: 36px;
                  line-height: 36px;
                }
                .ivu-input-icon-normal+.ivu-input{
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .richText{
        width: 100%;
        height: 340px;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top: none;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-bottom: 16px;
      }
      .explain{
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        .explain_title{
          width: 100%;
          font-size: 14px;
          color: #222222;
          padding: 16px;
          box-sizing: border-box;
          border: 1px solid #e5e5e5;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
        .explain_content{
          width: 100%;
          font-size: 15px;
          color: #222222;
          padding: 16px;
          box-sizing: border-box;
          border: 1px solid #e5e5e5;
          border-top: none;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
    }
  }
</style>

